<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>光山县旅游产业监控中心</title>
    <link rel="stylesheet" href="./assets/css/public.css">
    <link rel="stylesheet" href="./assets/css/common.css">
    <link rel="stylesheet" href="./assets/css/index.css">
    <link rel="stylesheet" href="./assets/css/index_zyhj.css">
    <link rel="stylesheet" href="./assets/css/animate.min.css">
</head>
<body>
    <div class="box">
        <!--头部-->
        <div class="title-box">
            <div class="title-left">
                <span id="weather">小雨转晴</span>
                <span id="temperature">32/23℃</span>
                <span id="windPower">东风</span>
            </div>
            <div class="title-img">
                <h3>光山县旅游产业监控中心</h3>
                <img src="./assets/images/title-bg.png">
            </div>
        </div>
        <!--主体-->
        <div class="main-box">
            <!--导航-->
            <div class="nav-box">
                <ul>
                    <li>
                        <a href="index.html">
                            <div>
                                <img src="./assets/images/icon-index.png">
                                <img src="./assets/images/icon-index-active.png">
                            </div>
                            <p>大数据人流热力图</p>
                        </a>
                    </li>
                    <li>
                        <a href="./chanye_jq.html">
                            <div>
                                <img src="./assets/images/icon-analysis.png">
                                <img src="./assets/images/icon-analysis-active.png">
                            </div>
                            <p>行业运行监测及统计</p>
                        </a>
                    </li>
                    <li class="active">
                        <a href="#">
                            <div>
                                <img src="./assets/images/icon-operation.png">
                                <img src="./assets/images/icon-operation-active.png">
                            </div>
                            <p>行业发展监测及统计</p>
                        </a>
                    </li>
                    <li>
                        <a href="./lvyoujia_qx.html">
                            <div>
                                <img src="./assets/images/icon-activity.png">
                                <img src="./assets/images/icon-activity-active.png">
                            </div>
                            <p>第三方数据处理和呈现</p>
                        </a>
                    </li>
                </ul>
            </div>
            <!--数据内容-->
            <div class="content-box flex-column">
                <div class="content-nav">
                    <ul>
                        <li class="active">
                            <a href="#">景区信息统计</a>
                        </li>
                    </ul>
                </div>
                <div class="content-main flex-row flex1">
                    <div class="content-left">
                        <div class="basicElements-leftTop animated bounceInDown">
                            <div class="content-title">
                                旅游产业要素
                            </div>
                            <div class="content-left-main flex1">
                                <ul class="basicElements-leftTop-nav">
                                    <li class="active">
                                        <a href="./index_zyhj.html">
                                            <div class="img-box">
                                                <img src="./assets/images/jingqu.png">
                                                <img src="./assets/images/jingqu-active.png">
                                            </div>
                                            <div class="heroic-content">
                                                <p>景区</p>
                                            </div>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="javaScript:;">
                                            <div class="img-box">
                                                <img src="./assets/images/zhusu.png">
                                                <img src="./assets/images/zhusu-active.png">
                                            </div>
                                            <div class="heroic-content">
                                                <p>住宿</p>
                                            </div>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="javaScript:;">
                                            <div class="img-box">
                                                <img src="./assets/images/canyin.png">
                                                <img src="./assets/images/canyin-active.png">
                                            </div>
                                            <div class="heroic-content">
                                                <p>餐饮</p>
                                            </div>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="javaScript:;">
                                            <div class="img-box">
                                                <img src="./assets/images/gouwu.png">
                                                <img src="./assets/images/gouwu-active.png">
                                            </div>
                                            <div class="heroic-content">
                                                <p>购物</p>
                                            </div>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="javaScript:;">
                                            <div class="img-box">
                                                <img src="./assets/images/lvxingshe.png">
                                                <img src="./assets/images/lvxingshe-active.png">
                                            </div>
                                            <div class="heroic-content">
                                                <p>旅行社</p>
                                            </div>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="javaScript:;">
                                            <div class="img-box">
                                                <img src="./assets/images/wc.png">
                                                <img src="./assets/images/wc-active.png">
                                            </div>
                                            <div class="heroic-content">
                                                <p>厕所</p>
                                            </div>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="javaScript:;">
                                            <div class="img-box">
                                                <img src="./assets/images/wenbao.png">
                                                <img src="./assets/images/wenbao-active.png">
                                            </div>
                                            <div class="heroic-content">
                                                <p>文保</p>
                                            </div>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="javaScript:;">
                                            <div class="img-box">
                                                <img src="./assets/images/xiangcun.png">
                                                <img src="./assets/images/xiangcun-active.png">
                                            </div>
                                            <div class="heroic-content">
                                                <p>乡村</p>
                                            </div>
                                        </a>
                                    </li>
                                </ul>
                                <div class="basicElements-leftTop-info">
                                    <a href="javascript:;" class="active">
                                        <span>5个</span>
                                        <b>4A级</b>
                                    </a>
                                    <a href="javascript:;">
                                        <span>15个</span>
                                        <b>3A级</b>
                                    </a>
                                    <a href="javascript:;">
                                        <span>20个</span>
                                        <b>2A级</b>
                                    </a>
                                    <a href="javascript:;">
                                        <span>30个</span>
                                        <b>A级</b>
                                    </a>
                                </div>
                                <p class="total">共<i>5</i>条记录</p>
                               <div class="basicElements-info-list scrollbar">
                                   <ul>
                                       <li><span>龙山湖国家湿地公园</span><a href="./index_zyhj_detail_blg.html">查看</a></li>
                                       <li><span>大苏山国家森林公园</span><a href="javascript:;">查看</a></li>
                                       <li><span>官渡河古渡口</span><a href="javascript:;">查看</a></li>
                                       <li><span>司马光故居</span><a href="javascript:;">查看</a></li>
                                       <li><span>邓颖超祖居</span><a href="javascript:;">查看</a></li>
                                   </ul>
                               </div>
                            </div>
                        </div>
                    </div>
                    <div class="content-center flex3">
                        <div class="flex1 map-box bounceInUp animated">
                            <div class="map" id="myMap-all">

                            </div>
                            <div class="video-box hd">
                                <video src="http://139.129.111.136/in1/templates/wechatmanage/image/1.mp4" controls=""></video>
                            </div>
                            <div class="map-info-box">
                                <div class="btn-list">
                                    <a href="./chanye_jq.html">企业监测</a>
                                    <a href="./tongji.html">客流监测</a>
                                </div>
                                <div class="img-box">
                                    <img src="./assets/temporary/baligou.jpg" alt="">
                                </div>
                                <div class="information-box">
                                    <h3>
                                        <span>龙山湖国家湿地公园 </span><i>国家级</i>
                                    </h3>
                                    <div>
                                        <p>地址：河南省信阳市光山县</p>
                                        <p>开放时间：</p>
                                        <p>全天</p>
                                        <p> 门票价格：免费开放</p>
                                        <p>建议游玩时间：一天</p>
                                    </div>
                                </div>
                                <div class="introduce-box scrollbar">
                                    <h2>景区介绍</h2>
                                    <p>
                                        八龙山湖湿地公园位于光山县城西南约七公里处，20世纪70年代末期动工，1988年建成。整体面积2000余亩，不仅风景秀丽，也是一座集防洪、供水、灌溉、旅游、发电、养殖为一体的多目标开发官渡河水资源的水利枢纽，并先后被获评“国家级水利风景区”，“国家级湿地公园”。
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</body>
<script src="./assets/plugin/jquery.min.js"></script>
<script src="./assets/plugin/ECharts/echarts.js"></script>
<script src="./assets/plugin/ECharts/china.js"></script>
<script src="./assets/plugin/jquery.leoTextAnimate.js"></script>
<script src="./assets/js/public.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=RbLCQuGNfG1cQrKmywquV6wEEkoVkyNY"></script>
<script>
    // 百度地图API功能
    var map = new BMap.Map("myMap-all", {minZoom:7,maxZoom:15}, { enableMapClick: false });
    var point = new BMap.Point(114.856385,31.958935);    // 初始化地图,设置中心点坐标
    map.centerAndZoom(point, 14);
    map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
    var blist = [];
    var districtLoading = 0;
    map.setMapStyle({style: 'light'})
    //默认地图样式(normal)
    //清新蓝风格(light)
    //黑夜风格(dark)
    //清新蓝绿风格(bluish)
    //高端灰风格(grayscale)
    //强边界风格(hardedge)
    //青春绿风格(darkgreen)
    //浪漫粉风格(pink)
    //午夜蓝风格(midnight)
    //自然绿风格(grassgreen)
    //精简风格(googlelite)
    //红色警戒风格(redalert)
    //添加点击事件
    function addClickHandler(content, marker) {
        marker.addEventListener("click", function(e) {
            // openInfo(content, e);
            $('.map-box .video-box').removeClass('hd')
        });
    }


    let newIcon = new BMap.Icon("./assets/images/icon-monitor.png", new BMap.Size(36, 47));
    var data_info = [[114.856253,31.958899, "青莲寺监控"],
        [114.860021,31.962859, "珏山监控"],
        [114.860021,31.962859, '白马寺森林公园监控']
    ];
    var radioData = []
    function showMarker() {
        for (var i = 0; i < data_info.length; i++) {
            var marker = new BMap.Marker(new BMap.Point(data_info[i][0], data_info[i][1]), {icon:newIcon });  // 创建标注
            var content = data_info[i][2];
            map.addOverlay(marker);               // 将标注添加到地图中
            addClickHandler(content, marker);
        }
    }
    $('.map-info-box .btn-list>a').click(function () {
        if($(this).text()=='视频监控'){
            showMarker()
            $(this).addClass('active')
        }
    })
</script>
</html>
